<template>
	<view>
		<view class="actionBar">
			<view class="favBtn">
				<fui-icon name="star" color="#000" size="70"></fui-icon>
			</view>
			<!-- 			<view v-else class="favokBtn">
				<fui-icon name="star-fill" color="#FFDD00" size="70"></fui-icon>
			</view> -->
			<!-- <view  class="baomingBtn">已报名，请相互联系</view> -->
			<view class="baomingBtn" @click="baomingBtn">我要应聘</view>
		</view>

		<view class="commCards" style="height:70rpx;">
			<view class="NoticeUserHeadPic" @click="gotoArtiter">
				<head-wear :width="90" :height="90" border-width="4" :WxHeadPic="Notice.WxHeadPic" :userInfo="Notice"
					:UserLevelID="Notice.UserLevelID" image-width="30" image-height="20" size="16" right="-7" bottom="0"
					oneRight="0"></head-wear>
			</view>
			<view class="marginLeft-20" style="float:left;width: 66%;">
				<view class="row-start" v-if="Notice.UserSex">
					<view class="fs-30 one-ellipsis" style="max-width: 95%;">{{ Notice.NickName }}</view>
					<auth-label v-if="Notice.isAuthOk == 2" :size="18" height="30"></auth-label>

				</view>
				<view style="font-size:22rpx; margin-top:8rpx;color:#999;">
					<text v-for="(item,index) in UserRoles" :key="index">
						{{ item.LabelName }}
						<text v-if="index < UserRoles.length-1">・</text>
					</text>
					<text v-if="Notice.UserCity !== '请设置您所在的城市'">｜{{ Notice.UserCity }}</text>
				</view>
			</view>

			<view style="float:right">
				<view style="text-align:right">
					<text class="fs-20" style="color:#3eb715;" v-if="Notice.isOnline === 1">在线</text>
					<text class="fs-20" style="color:#d6d6d6;" v-else>
						{{ $common.timeDiff(Notice.onlineTime, new Date()) }}
					</text>
				</view>
				<view style="display: flex;" class="marginTop-8 jc-end ai-center"
					@click.stop="onComplaint(`/pages/index/complaint/index?UserID=${Notice.UserID}&FeedbackType=3&TargetID=${Notice.NoticeID}`)">
					<uni-icons type="info" size="18" color="#999"></uni-icons>
					<text class="fs-22" style="color:#999;margin-left: 4rpx;">投诉</text>
				</view>
			</view>
		</view>

		<view class="commCards">
			<view class="noticeTitle">
				<text>{{ Notice.ClassName }}</text>
				<text style="margin-left:0rpx">・</text>
				<text v-if="Notice.PriceType && JSON.parse(Notice.PriceType).value === 1" style="color: #ff3737;">
					<text>¥</text>
					<text v-if="Notice.PriceQujian === 0">{{ Notice.Price|formatPrice }}</text>
					<text v-else>{{ Notice.StartPrice|formatPrice }} ~ {{ Notice.EndPrice|formatPrice }}</text>
					<text v-if="Notice.Unit">{{ JSON.parse(Notice.Unit).text}}</text>
				</text>
				<text v-if="Notice.PriceType && JSON.parse(Notice.PriceType).value !== 1"
					style="color: #ff3737;">{{ JSON.parse(Notice.PriceType).result }}</text>
			</view>
			<view class="marginTop-10 fs-26 padding-all-20 borderR-10 line-height-50"
				style="background-color: #f6f6f6;">

				<view style="height: 50rpx;display: flex;">
					<view class="locationIcon"><uni-icons type="location-filled" size="20"></uni-icons></view>
					<text class="city h-100" v-if="!Notice.City">面向地区：全国</text>
					<text class="city h-100" v-else>面向地区：{{ Notice.City }}</text>
				</view>
				<view class="address">
					<text v-if="Notice.PersonNum === 0">招募人数：不限</text>
					<text v-else>招募人数：{{ Notice.PersonNum }}</text>
				</view>
				<view class="times" v-if="Notice.SexLimit">性别要求：{{ JSON.parse(Notice.SexLimit).text }}</view>
				<view class="pics">
					<text>报名截止：</text>
					<text v-if="!Notice.NoticeEndTime">长期</text>
					<text v-else>{{ NoticeTime(Notice.NoticeEndTime) }}</text>
				</view>
			</view>
			<view class="bottomInfo">
				<text>{{$common.timeDiff(Notice.addTime)}}更新</text>
				<!-- JSON.parse(Notice.isReadUsers).length -->
				<text v-if="Notice.isReadUsers">{{ JSON.parse(Notice.isReadUsers).length | formatPrice }} 阅读</text>
			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">
				<view class="borderR-5" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></view>
				<view class="marginLeft-10">招募详情</view>
			</view>

			<view class="marginTop-10">

				<view class="content row ai-start" style="color:#999;">
					<view class="marginTop20"
						style="width: 8rpx;height: 8rpx;background-color: #FFDD00;border-radius: 8rpx;"></view>
					<view class="marginLeft-10 line-height-40"> {{ Notice.NoticeMemo }} </view>
				</view>

				<view class="row ai-center" style="color:#999;" v-if="Notice.NoticeTimes">
					<view style="width: 8rpx;height: 8rpx;background-color: #FFDD00;border-radius: 8rpx;"></view>
					<view class="marginLeft-10"> {{ Notice.NoticeTimes}} </view>
				</view>

				<view style="color:#999;display: flex;flex-direction: row;align-items: center;"
					v-if="Notice.NoticeAddress">
					<view style="width: 8rpx;height: 8rpx;background-color: #FFDD00;border-radius: 8rpx;"></view>
					<view class="marginLeft-10">{{ Notice.NoticeAddress}}</view>
				</view>

				<view style="margin-top:20rpx">
					<view style="height:auto" v-if="Notice.NoticePics && JSON.parse(Notice.NoticePics).length > 0">
						<view v-for="(itm,idx) in JSON.parse(Notice.NoticePics)" :key="idx"
							@click="showPhoto(JSON.parse(Notice.NoticePics), idx)">
							<zero-lazy-load borderRadius="10" :image="itm" imgMode='widthFix'></zero-lazy-load>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="commCards">
			<view class="commCardTitle">
				<view class="borderR-5" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></view>
				<view class="marginLeft-10">联系方式</view>
			</view>
			<view class="marginTop10" style="text-align: center;">
				- 报名后，等待对方联系你 -
			</view>
		</view>

		<view class="commCards" style="height:100rpx;">
			<view class="commCardTitle">
				<view class="border-R5" style="width: 8rpx;height: 30rpx;background-color: #FFDD00;"></view>
				<view class="marginLeft-10">已报名{{ NoticeBaoming.length }}人</view>
			</view>
			<view class="marginTop20" v-if="NoticeBaoming.length > 0">
				<view v-for="(item,key) in NoticeBaoming" :key="key">
					<view class="BaomingHeadPic">
						<zero-lazy-load borderRadius="70" height="70" :image="item.BaomingUser.WxHeadPic"
							imgMode='widthFix'></zero-lazy-load>
					</view>
				</view>
			</view>
		</view>

		<view class="commCards line-height-40" style="color:#999;">
			<text>温馨提示：双方私下沟通时注意防骗，切勿相信先缴纳费用的合作。如遇虚假通告、敲诈信息等不良行为，请立即向平台投诉。</text>
		</view>
		<view style="height: 136rpx;"></view>
	</view>
</template>

<script>
	import {
		NoticeDetails,
	} from '@/api/index.js'
	export default {

		filters: {
			formatPrice(price) {
				if (price > 10000) {
					return price / 10000 + 'w';
				} else if (price > 1000) {
					return price / 1000 + 'k'
				} else {
					return parseInt(price, 10);
				}
			}
		},
		data() {
			return {
				LoginInfo: 0,
				NoticeID: 0,
				UserRoles: [],
				Notice: {},
				NoticeBaoming: [],
				inviter: 0,
				$MyNoticeAction: [],
				ShareState: 0,
				FavState: 0,
				baseUrl: ''
			};
		},
		onLoad(option) {

			// this.getNotice()
		},

		methods: {
			baomingBtn() {
				uni.navigateTo({
					url: '/publicPages/recruit/baoming'
				})
			}
		}
	}
</script>

<style lang="scss">
	.commCards {
		clear: both;
		background-color: #FFF;
		padding: 40rpx;
		margin-top: 20rpx;
	}

	.row-start {
		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 100%;
		}
	}

	.commCardTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #505050;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.noticeTitle {
		font-size: 32rpx;
		color: #333;
		font-weight: bold
	}

	.NoticeUserHeadPic {
		position: relative;
		width: 90rpx;
		height: 90rpx;
		border-radius: 60rpx;
		background-color: #CCC;
		float: left;
	}

	.NoticeHeadPic {
		width: 100%;
		height: 100%;
		border-radius: 60rpx;
	}

	.BaomingHeadPic {
		float: left;
		width: 70rpx;
		height: 70rpx;
		border-radius: 60rpx;
		margin-left: -5rpx;
	}

	.authed {
		position: absolute;
		z-index: 100;
		right: -7rpx;
		top: -3rpx;
		display: flex;
		align-items: flex-end;
	}

	.actionBar {
		position: fixed;
		z-index: 100;
		bottom: 0;
		width: 100%;
		height: 125rpx;
		display: flex;
		justify-content: space-between;
		background-color: #FFF;
	}

	.baomingBtn1 {
		background-color: #FFDD00;
		color: #333;
		text-align: center;
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.baomingBtn {
		background-color: #FFDD00;
		color: #333;
		text-align: center;
		width: 500rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		margin: 10rpx;
		margin-right: 26rpx;
	}

	.baominger {
		width: 70rpx;
		height: 70rpx;
		border-radius: 70rpx;
		background-color: #CCC;
		float: left;
		margin-left: -10rpx;
	}

	.shareBtn {
		background-color: white !important;
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx;
		position: relative;
		margin: 20rpx 20rpx 0 20rpx;

		&::after {
			border: none;
		}
	}

	.favBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		color: #646464;
		margin: 10rpx 40rpx 0 0;
	}

	.favokBtn {
		width: 50rpx;
		height: 50rpx;
		margin-top: 8rpx;
		color: #646464;
		margin: 10rpx 40rpx 0 0;
	}

	.city {
		border-radius: 0 50rpx 50rpx 0;
		background-color: #FFDD00;
		font-size: 24rpx;
		padding: 0rpx 14rpx 0 14rpx;
		display: inline-block;
	}

	.bottomInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #d6d6d6;
		margin-top: 20rpx;
		border-top: 1px solid #f6f6f6;
		padding-top: 20rpx;
	}

	.locationIcon {
		height: 100%;
		background-color: #FFDD00;
		padding-left: 14rpx;
		border-radius: 50rpx 0 0 50rpx;
	}
</style>